<template>
  <div>
    <div id="gauge1"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("gauge1"));

      this.chart.setOption({
        title: [
          {
            text: "总样本量",
            left: "25%",
            top: "63%",
            textAlign: "center",
            textStyle: {

              color: "white",
              fontSize: 14,
              textAlign: "center"
            }
          },

          {
            text: "总参与人次",
            left: "71%",
            top: "63%",
            textAlign: "center",
            textStyle: {
              color: "white",
              fontSize: 14,
              textAlign: "center"
            }
          }
        ],
        series: [
          {
            type: "liquidFill",
            data: [0.5, 0.3333333333333333, 0.16666666666666666],
            radius: "30%",
            color: ["#d46b08", "#fa8c16", "#ffc069"],
            center: ["27%", "45%"],
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 6,
                borderColor: "#d46b08"
              }
            },
            label: {
              normal: {
                formatter: "50.00%",
                color: "red",
                fontSize: 12
              }
            },
            backgroundStyle: {
              color: "rgba(212, 107, 8, 0.2)"
            }
          },
          // {
          //   type: "liquidFill",
          //   data: [0.5, 0.3333333333333333, 0.16666666666666666],
          //   radius: "30%",
          //   color: ["#d46b08", "#fa8c16", "#ffc069"],
          //   center: ["50%", "75%"],
          //   outline: {
          //     borderDistance: 5,
          //     itemStyle: {
          //       borderWidth: 6,
          //       borderColor: "#d46b08"
          //     }
          //   },
          //   label: {
          //     normal: {
          //       formatter: "50.00%",
          //       color: "red",
          //       fontSize: 12
          //     }
          //   },
          //   backgroundStyle: {
          //     color: "rgba(212, 107, 8, 0.2)"
          //   }
          // },
          {
            type: "liquidFill",
            data: [0.5, 0.3333333333333333, 0.16666666666666666],
            radius: "30%",
            color: ["#CDC5BF", "#CDC9C9", "#CFCFCF"],
            center: ["73%", "45%"],
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 6,
                borderColor: "#CDC5BF"
              }
            },
            label: {
              normal: {
                formatter: "50.00%",
                color: "red",
                fontSize: 12
              },
              color: "red"
            },
            backgroundStyle: {
              color: "rgba(4,24,74,0.2)"
            }
          }
        ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#gauge1 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>